//  注意，在写样式时，请优先引用该文件中的变量，如遇到多个文件中共用的样式，可增至此文件中作为公共样式
//  **！！！！！！！！！目前，此文件中的值仍需要进一步根据实际表现进行调整 2024年7月23日11:40:23**

//  Variables
//  主题颜色由浅至深
$theme1BgColorWhite: rgba(255, 255, 255, 1);
$theme1BgColorLight: rgba(241, 242, 246, 1);
$theme1BgColor: rgba(175, 165, 192,  1);
$theme1BgColor2: rgba($theme1BgColor, 0.4);//项目进度框的背景色
$theme1BgColorDeep: rgba(128, 94, 143, 1);
$chatBoxGrey:rgb(242,242,242);//好友邀请框好友列表背景灰色


//  通用圆角由小到大
$generalBorderRadiusSmall: 6px;
$generalBorderRadius: 10px;
$generalBorderRadiusBig: 14px;
//  通用transition
$generalTransition: all ease-in-out 0.15s;
//  通用阴影
// $generalBoxShadow: 2px 2px 4px 2px rgba(0, 0,0, .15);
$generalBoxShadow: 2px 2px 4px 2px rgba(211,211,211, .3);
$generalBoxShadowSmall: 1px 1.5px 5px 0.5px rgba(0, 0, 0, 0.3);
//  通用字体颜色
$theme1FontColorWhite: rgba(255, 255, 255, 1);
$theme1FontColorDeep: rgba(128, 94, 143, 1);
$theme1FontColorBlack: rgba(0, 0, 0, 1);
//  通用字体大小
$theme1FontSize: 14px;
//  窗口最小宽度和高度
$viewMinWidth: 1440px;
$viewMinHeight: 800px;
//  页面通用padding
$foundationContentPadding:20px;


//  Animations and AnimationMixins
/*  
    关于命名，请注意：

    1.  滑入动画keyframes命名时需要以动画终点为原点描述起点相对于原点角度，
        名字结构为：动画动作描述 + From + 角度描述
        具体可参考 sliderInFromNegative45Deg

    2.  动画mixin的命名需要描述该mixin规定的动作描述和角度描述，角度描述见 1，
        名字结构为：动作描述 + 角度描述
        具体可参考：sliderInAniNegative45Deg
    
    3.  此外，关于正负角度，参照数学规定即可，用"Negative" + x + "Deg"表示负x度，正角度则去掉"Negative"，、
        角度值不需要过于精准的描述，大致描述清楚即可

    4.  建议平台中的动画尽量表现一致性，能使用相同的动画或渐变就采用相同的
*/
    // keyframes
@keyframes sliderInFromNegative45Deg {
    0% {
        opacity: 0;
        transform: translate(10px, 10px);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}  
@keyframes sliderInFrom225Deg {
    0% {
        opacity: 0;
        transform: translate(-10px, 10px);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}
    //  滑入动画
@mixin sliderInAniNegative45Deg {
    animation: sliderInFromNegative45Deg .75s ease-in-out 1;
}
@mixin sliderInAni225Deg {
    animation: sliderInFromNegative45Deg .75s ease-in-out 1;
}




//  layoutMixins
//  弹性布局居中
@mixin FlexCenterAndCenter {
    display: flex;
    justify-content: center;
    align-items: center;
}
//  内容浅色背景框
@mixin contentContainerBgc {
    $contentBlank: 20px;
    $calcContentBlank: $contentBlank * 4;
    width: calc(100% - $calcContentBlank);
    height: calc(100% - $calcContentBlank);
    padding: $contentBlank;
    background-color: rgba($theme1BgColorDeep, 0.14);
    overflow: hidden auto;
    border-radius: 20px;
    margin: $contentBlank;
    box-shadow: $generalBoxShadow;
}
//  标题前标志（小紫色柱）
@mixin tag {
    width: 4px;
    height: $theme1FontSize;
    background-color: $theme1BgColorDeep;
    border-radius: 2px;
}
//  通用按钮标准基本样式
@mixin btnBasicStyle {
    @include FlexCenterAndCenter;
    cursor: pointer;
    user-select: none;
    transition: $generalTransition;
}
//  悬浮显示滚动条
@mixin hoverShowScrollBar {
    &::-webkit-scrollbar {
        width: 4px;
        height: 100%;
        transition: all ease-in-out 5s;
    }
    &::-webkit-scrollbar-track {
        background-color: transparent;
        
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 2px;
        background-color: transparent;
        transition: all ease-in-out 5s;
    }
    &:hover::-webkit-scrollbar-thumb {
        background-color: rgba(178, 185, 196, 1);
    }
    &:hover::-webkit-scrollbar-track {
        background-color: rgba($theme1BgColorWhite, .5);
    }
}
//  标题通用样式
@mixin titleBasicStyle {
    font-size: 1.4 * $theme1FontSize;
    font-weight: 600;
}

.ellipsis{
	overflow: hidden;
	text-overflow:ellipsis;
	-webkit-line-clamp:1;
	-webkit-box-orient:vertical;
	display: -webkit-box;
    word-break: break-all;
}

.required {
    position: relative;
    /* padding-left: 30rpx; */
}
.required::before {
    content: '*';
    font-size: 16px;
    color: red;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
    margin: auto;
    display: flex;
    align-items: center;
}

* {
    scrollbar-width: thin; /* 'auto' 或 'thin' */
    scrollbar-color:  #f1f1f1; /* 滚动条颜色和轨道颜色 */
  }

.noData {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #A3A6AD;
}